<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 01_元素内容操作：操作元素和元素内容的方式
		 .html()         无参 --- 功能：获取匹配元素集合中第一个元素
		                 有参 --- 功能：【设置】获取匹配元素集合中所有元素并替换
		  特点：添加元素+内容
		 .val()          无参 --- 功能：针对表单元素 input select...
		                               获取第一个表单元素的值【value】
		                 有参 --- 功能：针对表单元素 input select...
		                               获取第一个表单元素的值  input直接设置
									                         select不能直接设置 设置原有value的值
		  特点：设置表单元素+内容，下拉列表只能添加存在value值               
		 .text()        无参 --- 功能：获取匹配元素集合中所有元素的文本内容
		                有参 --- 【设置】获取匹配元素集合中所有元素的文本内容做替换
		  特点：添加内容				
		 -->
	</head>
	<body>
		<h1>html()函数的使用</h1>
		<button> html()函数 有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>val()函数的使用</h1>
		<button class="btn1"> val()函数 【input】 无参</button>
		<input type="text" value="文本框真实数据1">
		<input type="text" value="文本框真实数据2" placeholder="文本框提示" >
		<br>
		<button class="btn2"> val()函数 【select】 无参</button>
		<button class="btn3"> val()函数 【select】 有参</button>
		<select>
			<!-- option包裹用户显示数据，option属性value -->
			<option value="rem1">lorem1 </option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		<h1>text()函数的基本使用:包裹内容，文本</h1>
		<button class="btn4">text()函数 无参</button>
		<button class="btn5">text()函数 有参</button>
		<p>lorem4</p>
		<p>lorem5</p>
		<p>lorem6</p>
		<script>
			// 抓到无参按钮  点击  打印p的text值
			$(".btn4").click(function(){
				var ptext=$("p").text();
				alert(ptext);
			});
			// 抓到有参按钮  点击  改变p中文本的内容：改变效果
			$(".btn4").click(function(){
			    $("p").text("改变效果");
			});
			
			
			
			// $('.btn1').click(function(){
			// 	/* 变量名不允许使用关键字  js中关键字 for in 遍历数组 */
			// 	var ins=$("input").val();
			// 	alert("val()函数的无参值"+ins);
			// });
			
			/* 练习 ： html  结构 .btn2  select>option*3 
			           jq   点击按钮，显示第一个表单元素的值          
			*/
			// $('.btn3').click(function(){
				/* 下拉列表：抓select元素 */
				// vals=$("select").val("lorem500");
				// 抓取打印select的js对象  默认字符串形式表示【object object】
				// 抓取select的js对象 调用对象tostring()方法，如果没有重写【object object】
			// 设置    第一个 option的value的值
			// $("select").val("rem1");
			// var vals=$("select").val();
			// 	alert("val()函数针对下拉列表："+vals);
			// });
			
			
			/* 变量     js变量--jq变量 
			int i=1; java写法 强类型转换
			var i=数值/元素; javaScript 弱类型语言
			*/
		   // var html =$("span").html();
		   // alert("html()函数的无参值："+html);
		   
		    /*练习： 点击button 实现span内容改成lorem lorem */
		   // $('button').click(function(){
		   //  $('span').html('<marquee>lorem</marquee>');
		   // });
		</script>
	</body>
</html>